<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isShowSendTemplateModal"
      title="设置发放表模板"
      class-name="vertical-center-modal"
      width="900"
    )
      Table.modal-table-default(:columns="thead" :data="tableData" border)
        template(slot-scope="{ row, index }" slot="idx")
          span 列{{index+1}}
        template(slot-scope="{ row, index }" slot="title")
          Input(v-model="tableData[index].title")
        template(slot-scope="{ row, index }" slot="toContent")
          .ivu-row
            .ivu-col-span-14.pr-5
              Input(v-model="tableData[index].toContent")
            .ivu-col-span-10.pl-5
              Select(v-model="tableData[index].toField" placeholder="选择映射项" clearable filterable label-in-value @on-change="selectChange(index, $event)")
                Option(
                  v-for="(c_item, index) in arrListDown.yingshe"
                  :value="c_item.value"
                  :key="index"
                ) {{ c_item.label }}
        template(slot-scope="{ row, index }" slot="action")
          a.mr-10(@click="handleAddRow(index)") 添加一行

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 保存
</template>

<script>
import { FinanceSPayableApi } from '@/api/FinanceSPayable.api.js'
import { Common } from '@/utils/common.js'
export default {
  name: 'SendTemplateModal',

  watch: {
  },

  computed: {
  },

  data () {
    return {
      isShowSendTemplateModal: false,
      sendTemplateModalTitle: '',
      thead: [
        { title: '序号', key: 'idx', slot: 'idx', align: 'center', width: 80 },
        { title: '列名', key: 'title', slot: 'title', align: 'center', width: 180 },
        { title: '内容', key: 'toContent', slot: 'toContent', align: 'center' },
        { title: '操作', key: 'ccc', slot: 'action', align: 'center', width: 120 },
      ],
      tableData: [{title: '', toContent: '', toField: null}],
      // formData: {},
      formItem: [
        { type: 'input', label: '开户行名称', placeholder: '请输入开户行名称', prop: 'bankName', model: 'bankName', style: 'ivu-col-span-24 is-required' },
      ],
      rules: {
      },
      arrListDown: {
        yingshe: []
      },
      parentRow: null
    }
  },

  mounted () {
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    cancel () {
      this.isShowSendTemplateModal = false
    },

    show (row) {
      this.parentRow = row
      this.isShowSendTemplateModal = true
      // this.$refs.formData.resetFields()
      this.tableData = [{title: '', toContent: '', toField: null}]
    },

    // 添加一行
    handleAddRow (index) {
      this.tableData.splice(index+1, 0, {title: '', toContent: ''})
    },

    // 映射项选择改变
    selectChange (index, valObj) {
      if (valObj) {
        console.log('映射项选择改变 index: ', index, ', valObj: ', valObj)
        this.tableData[index].toContent = valObj.label
      }
    },

    // 保存
    async handleSubmit () {
      var contents = []
      this.tableData.map((item, idx) => {
        if (item.title) {
          contents.push({Title: item.title, ToContent: item.toContent, ToField: item.toField, SortID: idx})
        } 
      })
      console.log('contents: ', contents)
      var params = {
        BankName: this.parentRow.bankName,
        Contents: contents
      }
      let res = await FinanceSPayableApi.postTemplate(params)
      console.log('保存res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.isShowSendTemplateModal = false
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
